<template>
	<view>
		<carHeader :title="'信息修改'"></carHeader>
		<view class="content">
			<view class="c1">
				<text>取消</text>
				<text style="color:blue" @click="update">确认</text>
			</view>
			<view class="c2">
				<radio-group @change="radioChange" style="display: flex;flex-wrap: wrap;">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in imgs" :key="item.index">
						<image :src="item.imgpath"></image>
						<view>
							<radio :value="item.id" :checked="index === current"
								style="position: relative;top: -210rpx;left: 10rpx;" />
						</view>
					</label>
					<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"
						@progress="progress" @success="success" @fail="fail" :image-styles="imageStyles"
						style="margin: 0 8rpx;;" />
				</radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageValue: [],
				imageStyles: {
					width: 110,
					height: 110,
					border: {
						color: "#ff5a5f",
						width: 1,
						style: 'dashed',
						radius: '2px'
					},
				},
				current: '',
				imgs: [{
						id: "1",
						imgpath: "../../static/uni.png"
					},
					{
						id: "11",
						imgpath: "../../static/uni.png"
					},
					{
						id: "3",
						imgpath: "../../static/uni.png"
					},
					{
						id: "4",
						imgpath: "../../static/uni.png"
					}
				]
			};
		},
		methods: {
			update() {
				console.log(this.imgs[this.current].imgpath);
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			radioChange: function(evt) {
				console.log(evt);
				for (let i = 0; i < this.imgs.length; i++) {
					if (this.imgs[i].id === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: white;
		position: relative;
		top: -200rpx;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 20rpx;

		.c1 {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid rgb(250, 250, 250);
			padding-bottom: 20rpx;
		}

		.c2 {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;

			image {
				width: 200rpx;
				height: 200rpx;
				margin: 0 8rpx;
			}
		}
	}
</style>